<script lang="ts" setup>
import Sortable from 'sortablejs'
import { onMounted, ref, watch } from 'vue';
const colList = [
  {
    label: '日期',
    prop: 'date',
    width: 120
  },
  {
    label: '名字',
    prop: 'name'
  }
]
const tableData = ref([
  {
    date: '111',
    name: 'sadasxxx',
    myIndex: 1
  },
  {
    date: '222',
    name: 'sadasxxx',
    myIndex: 2
  },
  {
    date: '333',
    name: 'sadasxxx',
    myIndex: 3
  }
])
/** 行拖拽 */
const rowDrop = () => {
  const tbody = document.querySelector('.el-table__body-wrapper tbody');
  Sortable.create(tbody, {
    handle: '.move-target',
    animation: 180,
    delay: 0,
    onEnd({ newIndex, oldIndex }) {
      const currRow = tableData.value.splice(oldIndex, 1)[0];
      tableData.value.splice(newIndex, 0, currRow);
    },
  });
}
watch(tableData, (newVal) => {
  console.log(newVal);
}, { deep: true })
onMounted(() => {
  rowDrop()
})
</script>

<template>
  <el-table row-key="id" :data="tableData" stripe border style="width: 100%">
    <el-table-column type="index"></el-table-column>
    <el-table-column v-for="(item, index) in colList" :key="index" :prop="item.prop" :label="item.label"
      :width="item.width" :class-name="item.cName">
    </el-table-column>
    <el-table-column label="操作">
      <el-button class="move-target">拖到我</el-button>
    </el-table-column>
  </el-table>
</template>

<style scoped>
</style>
